<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script src="../js/jquery-1.11.1.js"></script>
	<script src="../js/jquery.validate.js"></script>
	<script>
	$().ready(function() {
		$("#commentForm").validate({
			rules : {
				"name":{required:true,stringMaxLength:12},
				"email":{required:true},
			},
			messages : {
				"name" : "输入范围在1~12个字符或1~6个中文字之间",
			}
		});
	});

	/*自定义默认文字*/
	jQuery.extend(jQuery.validator.messages, {
	  required: "必填",
		remote: "请修正该字段",
		email: "请输入正确格式的电子邮件(格式：xxx@xx.com)",
		url: "请输入合法的网址",
		date: "请输入合法的日期",
		dateISO: "请输入合法的日期 (ISO).",
		number: "请输入合法的数字",
		digits: "只能输入整数",
		creditcard: "请输入合法的信用卡号",
		equalTo: "请再次输入相同的值",
		accept: "请输入拥有合法后缀名的字符串",
		maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"),
		minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"),
		rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"),
		range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
		max: jQuery.validator.format("请输入一个最大为{0} 的值"),
		min: jQuery.validator.format("请输入一个最小为{0} 的值")
	});

	/*自定义规则*/
	jQuery.validator.addMethod("stringMaxLength", function(value, element, param) {  
			var length = value.length;  
			for ( var i = 0; i < value.length; i++) {  
				if (value.charCodeAt(i) > 127) {  
					length++;  
				}  
			}  
			return this.optional(element) || (length <= param);  
			},
			$.validator.format("输入长度不能大于{0}")
	); 
	</script>
	<style>
	#commentForm {
		width: 500px;
	}
	#commentForm label {
		width: 250px;
	}
	#commentForm label.error {
		display:block;
		width:100%;
		color:red;
	}
	</style>
</head>
<body>
<div id="main">
	<form class="cmxform" id="commentForm" method="get" action="">
			<p>
				<label for="cname">名称 (必填, 小于12个字符)</label>
				<input id="cname" name="name" type="text">
			</p>
			<p>
				<label for="cemail">E-Mail (必填)</label>
				<input id="cemail" type="email" name="email">
			</p>
			<p>
				<input class="submit" type="submit" value="Submit">
			</p>
	</form>
</div>
</body>
</html>
